import { Component, forwardRef, Input } from '@angular/core'
import { FormGroup } from '@angular/forms'
import { AdFormConfig } from './form.config'
import { AdFormProvider } from './form.provider'

@Component({
  selector: 'ad-form,form[ad-form]',
  template: `
    <div
      class="ad-form-wrapper"
      [style.width]="getFormWidth()"
      [style.marginLeft.px]="-configure.spaceX"
      [style.alignItems]="configure.containerAlignment === 'center' ? 'center' : 'flex-start'"
    >
      <ng-content></ng-content>
    </div>
  `,
  providers: [{ provide: AdFormProvider, useExisting: forwardRef(() => AdFormComponent) }],
  host: {
    '[class.ad-form]': 'true',
  },
})
export class AdFormComponent {
  @Input() formGroup: FormGroup
  @Input() defaultConfig: AdFormConfig = {}
  get configure() {
    const defaultConfig: AdFormConfig = {
      row: 12,
      labelWidth: 100,
      labelSpaceX: 8,
      spaceX: 36,
      spaceY: 16,
      labelTextAlign: 'start',
      containerAlignment: 'start',
      itemAlignment: 'start',
      direction: 'row',
      labelSuffix: '：',
      showValue: false,
      showLabel: true,
      required: undefined,
      valueIsWrap: false,
    }
    return Object.assign(defaultConfig, this.defaultConfig)
  }
  /**
   * 获取表单宽度
   * @returns
   */
  getFormWidth() {
    return `calc(100% + ${this.configure.spaceX}px)`
  }
  constructor() {}
}
